<template>
  <Page class="bg-[#F5F9FC] text-[#263238] max-w-[750rpx] mx-auto pb-[80rpx]">
    <!-- 顶部区域 -->
    <view class="header bg-gradient-to-br from-[#2196F3] to-[#1976D2] text-white px-[20rpx] py-[15rpx] sticky top-0 z-[100] shadow-[0_2rpx_15rpx_rgba(33,150,243,0.3)]">
      <view class="top-bar flex justify-between items-center mb-[15rpx]">
        <view 
          class="back-btn bg-[rgba(255,255,255,0.2)] w-[36rpx] h-[36rpx] rounded-full flex items-center justify-center text-[16rpx]"
          @click="handleBack"
        >
          <IconFont name="icon-arrow-left" />
        </view>
        <view class="page-title text-[22rpx] font-bold flex-1 text-center">工厂招聘</view>
        <view class="user-actions flex gap-[12rpx]">
          <view 
            class="action-btn w-[36rpx] h-[36rpx] rounded-full bg-[rgba(255,255,255,0.2)] flex items-center justify-center text-[16rpx]"
            @click="handleSearch"
          >
            <IconFont name="icon-search" />
          </view>
          <view 
            class="action-btn w-[36rpx] h-[36rpx] rounded-full bg-[rgba(255,255,255,0.2)] flex items-center justify-center text-[16rpx]"
            @click="handleFilter"
          >
            <IconFont name="icon-filter" />
          </view>
        </view>
      </view>
      
      <!-- 搜索区域 -->
      <view class="search-container px-[15rpx] pb-[15rpx]">
        <view class="search-box flex bg-white rounded-[30rpx] px-[15rpx] shadow-[0_4rpx_12rpx_rgba(0,0,0,0.1)] h-[50rpx]">
          <nut-input 
            v-model="searchTerm"
            class="flex-1 border-none outline-none text-[16rpx] text-[#263238] px-[10rpx]"
            placeholder="搜索职位、工厂或地点..."
            @keypress.enter="doSearch"
          ></nut-input>
          <button 
            class="search-btn bg-transparent border-none text-[#2196F3] w-[50rpx] flex items-center justify-center text-[18rpx]"
            @click="doSearch"
          >
            <IconFont name="icon-search" />
          </button>
        </view>
      </view>
    </view>

    <!-- 筛选区域 -->
    <view class="filters flex px-[15rpx] py-[15rpx] gap-[10rpx] overflow-x-auto bg-[#FFFFFF] mx-[15rpx] rounded-[15rpx] shadow-[0_4rpx_12rpx_rgba(0,0,0,0.05)]">
      <nut-button 
        v-for="(filter, index) in filters" 
        :key="index"
        class="filter-btn px-[15rpx] py-[8rpx] bg-[#E3F2FD] rounded-[20rpx] text-[#2196F3] text-[14rpx] whitespace-nowrap border-none flex items-center gap-[5rpx]"
        :class="{ 'active bg-[#2196F3] text-white': activeFilter === index }"
        @click="setFilter(index)"
      >
        {{ filter }}
      </nut-button>
    </view>

    <!-- 职位列表 -->
    <view class="jobs-section px-[15rpx] mt-[20rpx]">
      <view class="section-header flex justify-between items-center mb-[15rpx]">
        <view class="section-title text-[20rpx] font-bold relative pl-[12rpx]">
          <view class="absolute left-0 top-[5rpx] h-[18rpx] w-[4rpx] bg-[#2196F3] rounded-[2rpx]"></view>
          热门工厂职位
        </view>
        <view 
          class="view-all text-[#2196F3] text-[14rpx] flex items-center"
          @click="viewAllJobs"
        >
          查看全部
          <IconFont name="icon-angle-right" class="ml-[3rpx]" />
        </view>
      </view>
      
      <view class="jobs-container flex flex-col gap-[15rpx]">
        <view 
          v-for="(job, index) in jobs" 
          :key="index"
          class="job-card bg-[#FFFFFF] rounded-[16rpx] p-[20rpx] shadow-[0_4rpx_15rpx_rgba(0,0,0,0.05)] transition-all duration-300 hover:translate-y-[-3rpx] hover:shadow-[0_8rpx_20rpx_rgba(33,150,243,0.15)] border-l-4 border-[#2196F3]"
        >
          <view 
            class="urgent-tag absolute top-[20rpx] right-[20rpx] bg-[#F44336] text-white text-[12rpx] px-[10rpx] py-[4rpx] rounded-[20rpx]"
            v-if="job.urgent"
          >
            急聘
          </view>
          <view class="job-header flex">
            <view class="company-logo w-[60rpx] h-[60rpx] rounded-[12rpx] bg-[#E3F2FD] flex items-center justify-center text-[#2196F3] text-[24rpx] mr-[15rpx] flex-shrink-0">
              <IconFont :name="job.icon" />
            </view>
            <view class="job-info flex-1">
              <view class="job-title text-[18rpx] font-bold mb-[5rpx]">{{ job.title }}</view>
              <view class="company-name text-[14rpx] text-[#546E7A] mb-[5rpx]">{{ job.company }}</view>
              <view class="job-meta flex gap-[15rpx] mt-[10rpx]">
                <view class="meta-item flex items-center gap-[5rpx] text-[13rpx] text-[#546E7A]">
                  <IconFont name="icon-map-marker-alt" class="text-[#2196F3]" />
                  <text>{{ job.location }}</text>
                </view>
                <view class="meta-item flex items-center gap-[5rpx] text-[13rpx] text-[#546E7A]">
                  <IconFont name="icon-briefcase" class="text-[#2196F3]" />
                  <text>{{ job.experience }}</text>
                </view>
              </view>
            </view>
          </view>
          
          <view class="salary text-[20rpx] font-bold text-[#F44336] my-[10rpx]">
            {{ job.salary }}
          </view>
          
          <view class="job-tags flex flex-wrap gap-[10rpx] mt-[15rpx]">
            <view 
              v-for="(tag, tIndex) in job.tags" 
              :key="tIndex"
              class="tag bg-[#E3F2FD] text-[#2196F3] text-[12rpx] px-[12rpx] py-[5rpx] rounded-[20rpx]"
              :class="{ 'highlight bg-[rgba(255,152,0,0.1)] text-[#FF9800]': tag.highlight }"
            >
              {{ tag.name }}
            </view>
          </view>
          
          <view class="job-footer flex justify-between items-center mt-[15rpx] pt-[15rpx] border-t border-[#E0E0E0]">
            <view class="post-time text-[12rpx] text-[#90A4AE]">
              {{ job.postTime }}
            </view>
            <nut-button 
              class="apply-btn bg-[#2196F3] text-white border-none rounded-[20rpx] px-[20rpx] py-[8rpx] font-medium transition-all duration-300 hover:bg-[#1976D2] hover:scale-105"
              :class="{ 'applied bg-[#4CAF50]': job.applied }"
              :disabled="job.applied"
              @click="applyJob(index)"
            >
              {{ job.applied ? '已申请' : '立即申请' }}
            </nut-button>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部导航 -->
    <view class="footer fixed bottom-0 left-0 right-0 max-w-[750rpx] mx-auto bg-[#FFFFFF] flex justify-around px-[10rpx] py-[12rpx] shadow-[0_-4rpx_15rpx_rgba(0,0,0,0.08)] z-[100] rounded-[25rpx_25rpx_0_0]">
      <view 
        v-for="(item, index) in footerItems" 
        :key="index"
        class="footer-btn flex flex-col items-center text-[12rpx] text-[#546E7A] text-decoration-none transition-all duration-300 px-[15rpx] py-[5rpx] rounded-[20rpx]"
        :class="{ 'active text-[#2196F3] bg-[#E3F2FD]': activeFooter === index }"
        @click="setFooter(index)"
      >
        <IconFont :name="item.icon" class="text-[22rpx] mb-[5rpx] transition-all duration-300" />
        <text class="font-medium">{{ item.title }}</text>
      </view>
    </view>
  </Page>
</template>

<script setup>
import { ref } from 'vue'
import { Taro } from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'
import { Input as nutInput, Button as nutButton } from '@nutui/nutui-taro'

// 搜索相关
const searchTerm = ref('')

// 筛选相关
const filters = ['全部', '普工', '技工', '质检', '仓库', '管理', '包吃住', '长白班']
const activeFilter = ref(0)

// 职位数据
const jobs = ref([
  {
    title: '电子厂操作工',
    company: '上海华星电子有限公司',
    location: '浦东新区',
    experience: '1年以上经验',
    salary: '¥5500-7500/月',
    urgent: true,
    postTime: '今天发布',
    applied: false,
    icon: 'icon-industry',
    tags: [
      { name: '长白班' },
      { name: '包吃住' },
      { name: '五险一金', highlight: true },
      { name: '加班补助' }
    ]
  },
  {
    title: 'SMT技术员',
    company: '中芯科技制造厂',
    location: '松江区',
    experience: '2年以上经验',
    salary: '¥6500-8500/月',
    urgent: false,
    postTime: '2天前发布',
    applied: false,
    icon: 'icon-microchip',
    tags: [
      { name: '两班倒' },
      { name: '包吃住' },
      { name: '年终奖金', highlight: true },
      { name: '带薪年假' }
    ]
  },
  {
    title: '汽车装配工',
    company: '上汽集团制造工厂',
    location: '嘉定区',
    experience: '不限经验',
    salary: '¥6000-8000/月',
    urgent: true,
    postTime: '昨天发布',
    applied: false,
    icon: 'icon-car',
    tags: [
      { name: '长白班' },
      { name: '包吃住' },
      { name: '五险一金' },
      { name: '节日福利', highlight: true }
    ]
  },
  {
    title: '仓库管理员',
    company: '京东物流仓储中心',
    location: '青浦区',
    experience: '1年以上经验',
    salary: '¥5000-7000/月',
    urgent: false,
    postTime: '3天前发布',
    applied: false,
    icon: 'icon-box',
    tags: [
      { name: '长白班' },
      { name: '包吃住' },
      { name: '五险一金' },
      { name: '绩效奖金', highlight: true }
    ]
  }
])

// 底部导航
const footerItems = [
  { icon: 'icon-home', title: '首页' },
  { icon: 'icon-search', title: '找职位' },
  { icon: 'icon-industry', title: '工厂招聘' },
  { icon: 'icon-file-alt', title: '我的简历' },
  { icon: 'icon-user', title: '我的' }
]
const activeFooter = ref(2)

// 处理返回
const handleBack = () => {
  Taro.navigateBack()
}

// 搜索功能
const doSearch = () => {
  if (searchTerm.value.trim()) {
    Taro.showToast({
      title: `搜索: ${searchTerm.value}`,
      icon: 'none',
      duration: 2000
    })
  } else {
    Taro.showToast({
      title: '请输入搜索内容',
      icon: 'none',
      duration: 2000
    })
  }
}

// 筛选功能
const setFilter = (index) => {
  activeFilter.value = index
  Taro.showToast({
    title: `筛选条件: ${filters[index]}`,
    icon: 'none',
    duration: 2000
  })
}

// 申请职位
const applyJob = (index) => {
  jobs.value[index].applied = true
  Taro.showToast({
    title: `已成功申请 ${jobs.value[index].title} 职位`,
    icon: 'none',
    duration: 2000
  })
}


// 处理搜索按钮
const handleSearch = () => {
  Taro.showToast({
    title: '打开高级搜索',
    icon: 'none',
    duration: 2000
  })
}

// 处理筛选按钮
const handleFilter = () => {
  Taro.showToast({
    title: '打开筛选面板',
    icon: 'none',
    duration: 2000
  })
}

// 底部导航切换
const setFooter = (index) => {
  activeFooter.value = index
  Taro.showToast({
    title: `切换到${footerItems[index].title}`,
    icon: 'none',
    duration: 2000
  })
}

// 查看所有职位
const viewAllJobs = () => {
  Taro.showToast({
    title: '加载全部职位',
    icon: 'none',
    duration: 2000
  })
}
</script>